<template>
  <div class="sign-in-subscribe-stock-rights">
    <c-title text="股权明细"></c-title>
    <div class="header">
      <div class="info">
        <div>
          <p class="bold">{{not_settlement_statistic}}</p>
          <p class="status">未结算</p>
        </div>
        <div>
          <p class="bold">{{already_settlement_statistic}}</p>
          <p class="status">已结算</p>
        </div>
      </div>
    </div>
    <van-tabs v-model="active" @change="change" title-active-color="#F15353">
      <van-tab title="全部"></van-tab>
      <van-tab title="未结算"></van-tab>
      <van-tab title="已结算"></van-tab>
    </van-tabs>
    <template v-if="list && list.length!==0">
    <van-cell-group inset>
        <van-cell v-for="(item,i) in list" :key="i" title-style="text-align:left;font-size:.75rem" value-class="f-12" >
          <template #title>
            <p style="color: #080808;">{{item.stock_name}}</p>
            <p style="color: #585858;">{{item.activity_name}}</p>
            <p style="color: #989898;">{{item.created_at}}</p>
          </template>
          <template #default>
            <p style="color: #f14e4e;">{{item.dividend_amount}}</p>
            <p style="color: #666;">{{item.status_name}}</p>
          </template>
        </van-cell>
    </van-cell-group>
  </template>
  <van-empty v-else description="暂无记录" />
  </div>
</template>

<script>
import { scrollMixin } from '../../utils/mixin';
export default {
  mixins: [scrollMixin],
  data() {
    return {
      active: 0,
      list: [],
      not_settlement_statistic:0,
      already_settlement_statistic:0,

      isLoadMore: true,
      current_page: 1,
      last_page: 1,
    };
  },

  activated() {
    this.initData()
    this.getData()
  },
  methods: {
  async   change() {

      let json = {};
      if(this.active !== 0){
        json.status = this.active ==1 ?0 :1;
      }
      let { result, msg, data } = await $http.get('plugin.sign-buy.frontend.asset-record.stock-record',json);
      if (result == 0) return this.$toast(msg);
      this.list = data.data;
      this.current_page =  data.current_page;
      this.last_page =  data.last_page;

    },
    initData() {
      this.list = [];
      this.isLoadMore = true;
      this.current_page = 1;
      this.last_page = 1;
    },
    async getData() {
      let { result, msg, data: { already_settlement_statistic, not_settlement_statistic, record } } = await $http.get('plugin.sign-buy.frontend.asset-record.stock');
      if (result == 0) return this.$toast(msg);
      this.list = record.data;
      this.current_page =  record.current_page;
      this.last_page =  record.last_page;
      this.already_settlement_statistic = already_settlement_statistic;
      this.not_settlement_statistic = not_settlement_statistic;
    },
   async getMoreData() {
      this.isLoadMore = false;
      if (this.current_page >= this.last_page) {
        return;
      }
      let json = {};
      json.page = this.current_page + 1;
      if(this.active!==0){
        json.status = this.active;
      }
      let { result, msg,  data: { already_settlement_statistic, not_settlement_statistic, record } } = await $http.get("plugin.sign-buy.frontend.asset-record.stock-record",json);
      if (result == 0) return this.$toast(msg);
      this.list = this.list.concat(record.data);
      this.current_page =  record.current_page;
      this.last_page =  record.last_page;
      this.already_settlement_statistic = already_settlement_statistic;
      this.not_settlement_statistic = not_settlement_statistic;
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .van-cell {
  justify-content: space-between;
  margin: 0.5rem 0;
  border-radius: 0.3125rem;
}

::v-deep .van-tabs__nav {
  background-color: unset !important;
}

::v-deep .van-cell-group {
  margin-top: 0.625rem;
  background-color: unset;
}

.sign-in-subscribe-stock-rights {
  .f-12 {
    font-size: 0.75rem;
  }

  .van-cell__title,
  .van-cell__value {
    flex: unset !important;
  }

  .bold {
    font-weight: bold;
  }

  .status {
    margin-top: 0.25rem;
  }

  .header {
    position: relative;
    height: 4.6875rem;
    margin-bottom: 3.75rem;
  }

  .info {
    position: absolute;
    top: 50%;
    left: 1rem;
    right: 1rem;
    transform: translateY(-10%);
    border-radius: 0.625rem;
    background-color: rgba(255, 255, 255, 100);
    box-shadow: 0 0 6px 0 rgba(192, 174, 158, 16);
    display: flex;
    justify-content: space-between;
    padding: 1.875rem 4.0625rem;
    background-image: linear-gradient(-50deg, #fe8b30 0%, #fbce68 100%);
    box-shadow: 0 0.625rem 0.9375rem 0 rgba(251, 166, 98, 0.2);
    color: #fff;

    &::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 31%;
      height: 2.25rem;
      width: 0.125rem;
      background: #f2f2f2;
    }
  }
}
</style>
